<template>
    <div class="hp100">
        <Tabs :value="currentTab" @on-click="changeTab" class="environ-tab">
            <TabPane v-for="(tab, key) in tabs" :key="key" :label="tab.label" :name="key">
            </TabPane>
            <div slot="extra">
                <slot></slot>
            </div>
        </Tabs>
        <component
            style="padding: 0 16px; height: calc(100% - 86px)"
            :is="tabs[currentTab].component"
            :prjId="projectId"
            :sceneId="sceneId"
            :contentName="contentName"
        ></component>
    </div>
</template>
<script>
import TrafficCollection from './trafficCollection.vue';
import TrafficRetrieval from './trafficRetrieval.vue';
export default {
    name: 'Traffic',
    props: [],
    components: { TrafficCollection, TrafficRetrieval },
    inject: ['detailParent'],
    data() {
        return {
            modal: false,
            currentTab: 'coll',
            tabs: {
                coll: {
                    label: '流量采集',
                    component: 'TrafficCollection',
                },
                ret: {
                    label: '流量检索',
                    component: 'TrafficRetrieval',
                },
            },
        };
    },
    computed: {
        contentDetail() {
            return this.detailParent.contentDetail;
        },
        projectId() {
            return this.contentDetail.projectId;
        },
        sceneId() {
            return this.contentDetail.sceneId;
        },
        contentName() {
            return this.contentDetail.name;
        },
    },
    methods: {
        changeTab(val) {
            this.currentTab = val;
        },
    },
};
</script>
<style scoped>
.environ-tab /deep/ .ivu-tabs-bar {
    margin-bottom: 0;
}
.environ-tab /deep/ .ivu-tabs-tabpane {
    /* padding: 10px 16px; */
}
.environ-tab /deep/ .ivu-tabs-nav .ivu-tabs-tab {
    padding: 11px 16px;
}
</style>
